<script>
// 小程序编辑弹窗页
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'EditImg'
})
</script>
<script setup>
import Upload from '@/components/app/upload.vue'
import { qrMiniprogramOrignalForm } from '@/data'
import { deepClone, isEmpty } from '@/utils'
import { defineProps } from 'vue'
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
import { postAddWelcom } from '@/api'
const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}

defineProps({
	dialogVisible: {
		type: Boolean,
		default: '我是默认值'
	}
})
const dialogVisible =ref(Prop.dialogVisible)
const form = ref({})
const isNew = ref(true)
let initForm = {}

const formRef = ref()
const show = (val) => {
	if (!isEmpty(val)) {
		var object = deepClone(qrMiniprogramOrignalForm)
		form.value = Object.assign(object, val)
		isNew.value = false
	} else {
		isNew.value = true
	}
	dialogVisible.value = true
}
const rules = ref({
	title: [
		{ required: true, message: '请输入名称', trigger: 'blur' },
		{ min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' }
	]
})
const change = (e) => {}
// 取消
const cancel = () => {
	resetForm()
	emits('getDialogueData')
}
const getUploadImg = (val) => {
	form.value.img = val.url
	console.log('组件返回的img')
}
const resetForm = () => {
	form.value = qrMiniprogramOrignalForm
}
// 保存按钮
const submit = () => {
	console.log(form.value)
	// dialogVisible.value = false
	emits('getDialogueData', form)
}
const emits = defineEmits(['getDialogueData'])
defineExpose({
	show
})
</script>
<template>
	<div>
		<el-dialog center v-model="dialogVisible" title="添加小程序" width="700px" :before-close="cancel">
			<!-- :title="(isNew == true ? '新增' : '编辑') + '图片'" -->
			<el-tag style="" class="app-el-tag-common app-margin-bottom" type="primary">
				<MyIcon class="app-icon app-primary-font" name="Bell" />
				请填写企业微信后台绑定的小程序id和路径，否则会造成发送失败
			</el-tag>
			<el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
				<el-form-item label="小程序标题：" prop="title" style="margin-bottom: 20px">
					<el-input v-model="form.title" />
				</el-form-item>
				<el-form-item label="小程序appID:" prop="appId" style="margin-bottom: 20px">
					<el-input v-model="form.appId" />
				</el-form-item>
				<el-form-item label="小程序路径：" prop="appUrl" style="margin-bottom: 20px">
					<div>
						<el-input v-model="form.appUrl" />
						<div class="app-words-tip-weak">注意:小程序路径应以html作为后缀</div>
					</div>
				</el-form-item>
				<el-form-item label="小程序封面：">
					<div>
						<div>
							<Upload :imgurl='form.img' @getImg="getUploadImg($event, val)" />
						</div>

						<div class="app-words-tip-weak">建议图片大小在2M以内,建议尺寸：352*282px</div>
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取消</el-button>
					<el-button type="primary" @click="submit">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped>
.dialog-footer button:first-child {
	margin-right: 10px;
}
.el-dialog__header {
	text-align: center;
}
</style>
